<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form :inline="true">
                    <el-button type="success" @click="exp()" plain>导出报表</el-button>
                    <!-- <el-link href="http://localhost:8080/admin/user/export"  :headers="headers" target="_blank">导出</el-link> -->
                    <el-form-item style="float: right;">
                        <el-input v-model="uname" placeholder="请输入要搜索的姓名" @input="selectAll(1)" />
                    </el-form-item>
                </el-form>
                <el-table :data="userList.list" border>
                    <el-table-column prop="uid" label="ID" width="50px" />
                    <el-table-column prop="uname" label="姓名" width="90px" />
                    <el-table-column prop="unumber" label="身份证号码" width="120px" />
                    <el-table-column prop="uphone" label="电话" width="120px" />
                    <el-table-column prop="rnumber" label="入住房间" />
                    <el-table-column prop="ustart" label="入住时间" />
                    <el-table-column prop="uend" label="退房时间" />
                    <el-table-column prop="ustate" label="状态" align="center">
                        <template #default="scope">
                            <el-tag type="success" v-if="scope.row.ustate == 1">已入住</el-tag>
                            <el-tag type="info" v-else>已退房</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button size="small" plain v-if="scope.row.ustate == 2" disabled type="warning">
                                修改
                            </el-button>
                            <el-button size="small" plain v-else type="warning" @click="selectByUid(scope.row.uid)">
                                修改
                            </el-button>
                            <el-button size="small" plain v-if="scope.row.ustate == 2" disabled type="danger">
                                删除
                            </el-button>
                            <el-button size="small" v-else type="danger" @click="deleteByUid(scope.row.uid)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="row-bg" justify="center" style="margin-top: 20px;">
                    <el-pagination layout="prev, pager, next" :total="userList.total" :page-size="userList.pageSize"
                        @change="selectAll" />
                </el-row>
            </el-card>
        </el-col>
    </el-row>

    <!-- 修改对话框开始 -->
    <el-dialog v-model="updateShow" title="修改用户信息" width="500">
        <el-form>
            <el-form-item label="姓名" label-width="20%">
                <el-input v-model="userUpdate.uname" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="身份证号码" label-width="20%">
                <el-input v-model="userUpdate.unumber" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="电话" label-width="20%">
                <el-input v-model="userUpdate.uphone" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="入住房号" label-width="20%">
                <el-input v-model="userUpdate.rnumber" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="入住时间" label-width="20%">
                <el-date-picker v-model="userUpdate.ustart" type="date" placeholder="请选择日期" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" style="width: 300px" />
            </el-form-item>
            <el-form-item label="退房时间" label-width="20%">
                <el-date-picker v-model="userUpdate.uend" type="date" placeholder="请选择日期" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" style="width: 300px" />
            </el-form-item>
            <!-- <el-form-item label="状态" label-width="20%">
                <el-radio-group v-model="userUpdate.ustate">
                    <el-radio :value="1"><el-tag type="success">已入住</el-tag></el-radio>
                    <el-radio :value="2"><el-tag type="info">已退房</el-tag></el-radio>
                </el-radio-group>
            </el-form-item> -->
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateShow = false">
                    取消
                </el-button>
                <el-button type="primary" @click="update">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 修改对话框结束 -->
</template>
<script setup>
import userApi from '@/api/userApi';
import { ref,computed } from 'vue';
import { ElLoading } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useTokenStore } from '@/stores/token';

const tokenStore = useTokenStore();
//查询用户姓名
const uname = ref('');
//修改对话框
const updateShow = ref(false)
//所有用户的基本信息
const userList = ref({
    total: 0,
    pageSize: 0,
});
//修改用户信息
const userUpdate = ref({
    uid: '',
    uname: '',
    unumber: '',
    uphone: '',
    rnumber: '',
    ustart: '',
    uend: '',
    ustate: ''
})
//计算属性
const headers = computed(() => {
    let token = tokenStore.tokenStr;
    return {
        token
    }
})

//导出报表
function exp() {
   // userApi.export();
    
   
    //localStorage.setItem("token",)
    location.href = 'http://localhost:8080/admin/user/export'
}
//修改用户信息
function update() {
    userApi.update(userUpdate.value)
        .then(resp => {
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1500
                })
                selectAll(userList.value.pageNum);
                updateShow.value = false;
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 1500
                });
            }
        })
}
//查询指定用户信息
function selectByUid(uid) {
    userApi.selectByUid(uid)
        .then(resp => {
            userUpdate.value = resp.data;
            updateShow.value = true
        })
}
//查询所有用户
function selectAll(pageNum) {
    userApi.selectAll(pageNum, uname.value)
        .then(resp => {
            userList.value = resp.data;
        })
}
//删除
function deleteByUid(uid) {
    ElMessageBox.confirm(
        '确认删除该用户?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            userApi.deleteByUid(uid)
                .then(resp => {
                    if (resp.code == 10000) {
                        ElMessage({
                            message: resp.msg,
                            type: 'success',
                            duration: 1500
                        })
                        selectAll(userList.value.pageNum);
                    } else {
                        ElMessage({
                            message: resp.msg,
                            type: 'error',
                            duration: 1500
                        });
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
selectAll(1);
</script>
<style scoped></style>